﻿<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>jQuery Contact Form Plugin: FFForm</title>
    <link href="/static/css/demo.css" rel="stylesheet" type="text/css">
</head>
<body>
<section id="getintouch">
    <div class="container" style="border-bottom: 0;">
        <h1>
            <span>GET STARTED NOW — IT'S FREE!</span>
        </h1>
    </div>
    <div class="container">
        <form class="contact" action="#" method="post" id="form">
            <div class="row clearfix">
                <div class="lbl">
                    <label for="name">
                        Name</label>
                </div>
                <div class="ctrl">
                    <input type="text" id="name" name="name" data-required="true" data-validation="text"
                           data-msg="Invalid Name" placeholder="请填写姓名">
                </div>
            </div>
            <div class="row clearfix">
                <div class="lbl">
                    <label for="email">
                        E-Mail</label>
                </div>
                <div class="ctrl">
                    <input type="text" id="email" name="email" data-required="true" data-validation="email"
                           data-msg="Invalid E-Mail" placeholder="Ex: youremail@domain.com">
                </div>
            </div>
            <div class="row clearfix">
                <div class="lbl">
                    <label for="email">
                        Phone</label>
                </div>
                <div class="ctrl">
                    <input type="text" id="phone" name="phone" data-required="true" data-validation="custom"
                           data-msg="Invalid Phone #" placeholder="Ex: 111-258-444">
                </div>
            </div>
            <div class="row clearfix">
                <div class="lbl">
                    <label for="subject">
                        Subject</label>
                </div>
                <div class="ctrl">
                    <input type="text" name="subject" id="subject" placeholder="Ex: Quote for Project">
                </div>
            </div>
            <div class="row clearfix">
                <div class="lbl">
                    <label for="message">
                        Message</label>
                </div>
                <div class="ctrl">
                    <textarea id="message" name="message" rows="6" cols="10"></textarea>
                </div>
            </div>
            <div class="row  clearfix">
                <div class="span10 offset2">
                    <input type="submit" name="submit" id="submit" class="submit" value="Send Message">
                </div>
            </div>
        </form>
    </div>
</section>
<!--Framework-->
<script src="/static/js/jquery-ui.js" type="text/javascript"></script>
<!--End Framework-->
<script src="/static/js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="/static/js/jquery.ffform.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#form').ffform({
            animation: 'flip',
            submitButton: '#submit',
            validationIndicator: '#validation',
            successIndicator: '#success',
            'fields': [{
                'id': 'name',
                required: true,
                requiredMsg: '请填写姓名',
                type: 'text',
                validate: true,
                msg: 'Invalid Name'
            }]
        });
    });
</script>
</body>
</html>
